<template>
  <div class="my-mine">
    <div class="user">
      <div class="head">
        <img
          src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png"
        />
        <span>用户</span>
      </div>
    </div>
    <van-grid :column-num="3" class="my">
      <van-grid-item text="我的订单" />
      <van-grid-item text="优惠券" />
      <van-grid-item text="我的足迹" />
      <van-grid-item @click="getListAction" text="我的收藏" />
      <van-grid-item text="地址管理" />
      <van-grid-item text="联系客服" />
      <van-grid-item text="帮助中心" />
      <van-grid-item text="意见反馈" />
      <van-grid-item />
    </van-grid>
    <tab-bar></tab-bar>
  </div>
</template>
<script>
import tabbar from "../../components/tabbar";
import { listAction } from "../../api/mine/index"
export default {
  data() {
    return {};
  },
  methods: {
    getListAction() {
      listAction({openId:"15836741268"}).then(res=>{
        console.log(666);
        console.log(res);
      })
    }
  },
  components: {
    "tab-bar": tabbar,
  },
};
</script>
<style lang="scss">
.my {
  .van-grid-item__content--center {
    height: 72px;
  }
  [class*="van-hairline"]::after {
    border-color: rgba(0, 0, 0, 0.15);
  }
}
</style>
<style lang="scss" scoped>
.my-mine {
  height: 100vh;
  background-color: #f4f4f4;
}
.user {
  background-color: #333;
  height: 140px;
  .head {
      position: relative;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      width: fit-content;
    img {
      border-radius: 50%;
      width: 74px;
      height: 74px;
      vertical-align: middle;
    }
    span {
        font-size: 14px;
      color: #fff;
      margin-left: 15px;
    }
  }
}
</style>
